<template>
    <div class="search_result_item">
        <div class="search_result_item_base">
            <div class="search_result_item_img">
                <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')">
            </div>
            <div class="search_result_item_info">
                <div class="search_result_item_info_title" @click="goDetail(item.id)">{{ item.name }}</div>
                <div class="search_result_item_info_text">{{ typeLabel }}：
                    {{type == 'audio' || type == 'video' || type == 'text'?item.speaker:item.author}}
                </div>
                 <div class="search_result_item_info_text" v-if="item.organizer && (type == 'audio' || type == 'video' || type == 'text')">主办单位：{{item.organizer}}</div>
                <div class="search_result_item_info_text" v-if="issuingUnitLabel && item.issuingUnitName">{{ issuingUnitLabel }}：{{item.issuingUnitName}}</div>
                <div class="search_result_item_info_text" v-if="item.category">分类：{{item.category}}</div>
                <div class="search_result_item_info_tag">
                    <base-tag type="primary" v-for="tag,index in item.tagList" :key="'tag'+index"> {{tag}} </base-tag>
                    <base-tag type="warning" v-for="category,index in item.categoryList" :key="'category'+index">{{category}} </base-tag>
                </div>
                <div class="search_result_item_info_price_check">
                    <div class="search_result_item_info_price">
                        ￥{{item.price}}
                    </div>
                    <div class="search_result_item_info_check">
                        <base-checkbox v-model="item.checked" :disabled="item.disabled"> </base-checkbox>
                    </div>
                </div>
            </div>
        </div>
        <div class="search_result_item_intro">
            <div class="intro-text" :class="{'show-more': item.showMore}" ref="introText">
                {{ item.intro }}
            </div>
            <div v-if="item.isMore" class="show-more-btn" @click="toggleIntro(item)">
                {{ item.showMore ? '收起' : '展示更多' }}
            </div>
        </div>
        <div class="search_result_item_operate">
            <base-button type="primary" @click="addOrder(item)"> 立即订购 </base-button>
            <base-button type="text" @click="addCart(item)"> 加入购物车 </base-button>
            <div :class="{'simple-action collect':true, 'is-active':item.userCollectionStatus == 1}" @click="operateCollect(item)">
                <svg fill="currentColor" viewBox="0 0 24 24" width="18" height="18" class="Icon Icon--Collect"><path d="M5.515 19.64l.918-5.355-3.89-3.792c-.926-.902-.639-1.784.64-1.97L8.56 7.74l2.404-4.871c.572-1.16 1.5-1.16 2.072 0L15.44 7.74l5.377.782c1.28.186 1.566 1.068.64 1.97l-3.89 3.793.918 5.354c.219 1.274-.532 1.82-1.676 1.218L12 18.33l-4.808 2.528c-1.145.602-1.896.056-1.677-1.218z" fill-rule="evenodd"></path></svg>
                {{item.userCollectionStatus == 1?'取消收藏':'收藏'}}
                </div>
            <div class="simple-action recommend" :class="{'is-active':item.userRecommendationStatus == 1}" @click="opreateRecommend(item)"> <svg data-v-2c035fc6="" width="1.2em" height="1.2em" viewBox="0 0 24 24" fill="currentColor" class="Icon Icon--like"><path data-v-2c035fc6="" d="M12.004 4.934c1.015-.944 2.484-1.618 3.98-1.618 3.48 0 6.53 3.265 6.15 7.614-.11 1.254-.686 2.55-1.458 3.753-.778 1.215-1.79 2.392-2.845 3.419-1.054 1.028-2.168 1.923-3.161 2.566a9.96 9.96 0 01-1.41.777c-.418.182-.862.32-1.268.32s-.848-.137-1.267-.317a9.918 9.918 0 01-1.407-.771c-.992-.64-2.103-1.53-3.156-2.555-1.052-1.024-2.062-2.2-2.84-3.417-.77-1.208-1.346-2.51-1.456-3.775-.38-4.349 2.67-7.614 6.15-7.614 1.484 0 2.983.673 3.988 1.618z" fill-rule="evenodd" clip-rule="evenodd"></path></svg> 
            {{item.userRecommendationStatus == 1?'取消推荐':'推荐'}} {{ item.countRecommendation || 0 }} </div>
        </div>
    </div>
</template>
<script>
import {EditCart} from '../../service/cart'
import {EditOrder} from '../../service/order'
import {AddRecommendation, CancelRecommendation} from '../../service/recommendation'
import {AddCollection, CancelCollection} from '../../service/collection'
export default {
    name: 'ResourceList',
    data() {
        return {
            item:{},
        }
    },
    props:{
        currItem:{
            type:Object,
            default:{}
        },
        type:{
            type:String,
            default:'video'
        },
        isShowChecked:{
            type:Boolean,
            default:true
        }
    },
    computed: {
      typeLabel() {
        const labels = {
          video: '主讲人',
          audio: '主讲人',
          text: '作者',
          post: '作者',
          patent: '发明人',
          standard: '起草人',
          report: '作者',
          ebook: '作者',
        };
        return labels[this.type] || '作者';
      },
      issuingUnitLabel() {
        const labels = {
          video: '发行单位',
          audio: '发行单位',
          text: '发行单位',
          post: '机构',
          patent: '',
          standard: '发布单位',
          report: '发布机构',
          ebook: '出版社'
        };
        return labels[this.type];
      },
    },
    mounted() {
        this.item = this.currItem;
        this.checkOverflow();
    },
    watch: {
        '$route.params.type': {
            handler: function (val, oldVal) {
                // this.checkOverflow();
            },
            deep: true
        }
    },
    methods: {
        goDetail(id){ 
            // if (this.type == 'video' || this.type == 'audio' || this.type == 'text') {
            //      window.open(this.$router.resolve("/videoAudioDetail/"+id).href)
            // } else {
            //     }
                window.open(this.$router.resolve("/resourceDetail/"+id).href)
        },
        toggleIntro(item) {
            this.$set(item, 'showMore', !item.showMore);
        },
        addCart(item){
            EditCart({
                "userId": this.user.id,
                "resourceType":this.type,
                "resourceId":item.id,
                "price":item.price,
            }).then(res=>{
                if(res.code == -1){
                    this.$message.error(res.msg);
                    return;
                }
                this.$message.success(res.msg);
                this.$router.push("/cart");
            })
        },
        addOrder(item){
            let params = {
                orderUserId: this.user.id,
                orderResourceList:[{
                    resourceId: item.id,
                    resourceType: item.type,
                    resourceName: item.name,
                    unitPrice: item.price,
                    realPaid: item.price
                }]
            }
            EditOrder(params).then(res => {
                if (res.code == -1) {
                    this.$message.error(res.msg);
                    return;
                }
                this.$message.success(res.msg);
                // window.open(this.$router.resolve("/order/"+res.data.id).href)
            })
        },
        checkOverflow() {
            this.$nextTick(() => {
                const introEl = this.$refs.introText;
                if (!introEl) return false;
                const originalMaxHeight = introEl.style.maxHeight;
                introEl.style.maxHeight = 'none';
                const scrollHeight = introEl.scrollHeight;
                introEl.style.maxHeight = originalMaxHeight;
                let isMore = scrollHeight > 20;
                console.log('scrollHeight', scrollHeight, 'isMore', isMore);
                this.item.isMore = isMore;
            });
        },
        operateCollect(item){
            if (item.userCollectionStatus == 1) {
                CancelCollection({resourceId: item.id, resourceType: this.resourceActionMap[item.type]}).then(res => {
                    if (res.code == -1) {
                        this.$message.error(res.msg);
                        return;
                    }
                    this.$set(item,'userCollectionStatus',2)        
                    this.$set(item,'countCollection',item.countCollection -= 1)
                    this.$message.success(res.msg);
                })
            } else {
                AddCollection({resourceId: item.id, resourceType: this.resourceActionMap[item.type]}).then(res => {
                    if (res.code == -1) {
                        this.$message.error(res.msg);
                        return;
                    }
                    this.$set(item,'userCollectionStatus',1)
                    this.$set(item,'countCollection',item.countCollection += 1)
                    this.$message.success(res.msg);
                })
            }
        },
        opreateRecommend(item){
            if (item.userRecommendationStatus == 1) {
                CancelRecommendation({resourceId: item.id, resourceType: this.resourceActionMap[item.type]}).then(res => {
                    if (res.code == -1) {
                        this.$message.error(res.msg);
                        return;
                    }
                    this.$set(item,'userRecommendationStatus',2)
                    this.$set(item,'countRecommendation',item.countRecommendation -= 1)
                })
            } else {
                AddRecommendation({resourceId: item.id, resourceType: this.resourceActionMap[item.type]}).then(res => {
                    if (res.code == -1) {
                        this.$message.error(res.msg);
                        return;
                    }
                    this.$set(item,'userRecommendationStatus',1)
                    this.$set(item,'countRecommendation',item.countRecommendation += 1)
                    this.$message.success(res.msg);
                })
            }
        }
    }
}
</script>

<style scoped lang="scss">
    .search_result_item{
        display: flex;
        padding: 20px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        flex-direction: column;

        .search_result_item_base{
            display: flex;
            width: 100%;
            .search_result_item_img{
                    width: 138px;
                    height: 150px;
                    margin-right: 32px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
            }
            .search_result_item_info{    
                display: flex;
                flex-direction: column;
                gap: 10px;
                flex: 1;
                position: relative;

                .search_result_item_info_title{
                    font-size: 18px;
                    color: #3B7AA3 !important;
                    cursor: pointer;
                }
                .search_result_item_info_text{
                    font-size: 14px;
                    color: #666;
                }
                .search_result_item_info_tag{
                    display: flex;
                    align-items: center;
                    gap: 18px;
                }
                .search_result_item_info_price_check{
                    position: absolute;
                    right: 15px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 10px;
                    .search_result_item_info_price {
                        color: #F97544;
                        font-size: 16px;
                        font-weight: bold;
                    }
                }
            }
        }
        .search_result_item_intro{
            font-size: 14px;
            color: #666;
            margin: 12px 0px;
            position: relative;
            .intro-text {
                max-height: 20px; // 3行文字的高度
                line-height: 20px;
                overflow: hidden;
                // white-space: nowrap;
                // text-overflow: ellipsis;
                
                &.show-more {
                    max-height: 1000px; // 展开后的最大高度
                }
            }
            
            .show-more-btn {
                color: #3B7AA3;
                cursor: pointer;
                text-align: left;
                padding: 5px 0;
                
                &:hover {
                    opacity: 0.8;
                }
            }
        }
        .search_result_item_operate{
            display: flex;
            align-items: center;
            gap: 15px;
            .base-button{
                padding: 0 138px;
                border-radius: 8px;
            }
            .base-button--text{
                border: 1px solid #3B7AA3;
                color: #3B7AA3;
                background-color: #fff;
            }
            .simple-action.is-active .Icon--like {
                fill: #f64041;
            }

            .simple-action.is-active .Icon--Collect {
                fill: #ddbb34;
            }


            .simple-action:hover .Icon--like {
                fill: #f64041;
            }

            .simple-action:hover .Icon--Collect {
                fill: #ddbb34;
            }
            
            .simple-action{
                padding: 10px 16px;
                border-radius: 8px;
                display: flex;
                align-items: center;
                border: 1px solid #3B7AA3;
                cursor: pointer;
                color: #4b5b76;

                .Icon{
                    transition: fill .3s;
                    fill: #4b5b76;
                    padding-right: 2px;
                }
            }
        }
    }
</style>